<template>
    <div class="Layout" :style="{ height: Height + 'px' }">
        <div class="TableContent">
            <a-table v-bind="$attrs" :loading="loading" :data-source="data" :pagination="false">
                <template #default>
                    <slot></slot>
                </template>
                <template #summary>
                    <slot name="summary"></slot>
                </template>
                <template #bodyCell="{ column, record }">
                    <template v-if="column.type === 'format'">
                        {{ formatContent(record, column.formatStr) }}
                    </template>
                    <template v-if="column.type === 'dict'">
                        <span v-dict:[column.dict]="[record[column.dataIndex], column.valueKey, column.showKey]"></span>
                    </template>
                    <template v-if="column.type === 'FilterValue'">
                        {{ FilterValue(record[column.dataIndex], column.defaultStr) }}
                    </template>
                </template>
            </a-table>
        </div>
        <div class="PageContent" v-if="totalNumber">
            <a-pagination v-bind="props.pagination" v-model:current="PageParmas.pageNum"
                v-model:pageSize="PageParmas.pageSize" :total="totalNumber" />
        </div>
    </div>
</template>
<script setup>

import { inject, ref, watch } from "vue";
const data = ref([]);
const props = defineProps(['pagination', 'desableLoading'])
const Height = inject('TableViewHeight', 'auto');
const loading = ref();

// 简化字符串格式化的方法
const formatContent = function (row, formatStr) {
    const keyArray = [];
    const valueArray = [];
    for (const key in row) {
        const element = row[key];
        keyArray.push(key);
        valueArray.push(element);
    };
    const Fun = new Function(keyArray, `return \`${formatStr}\``);
    return Fun.apply(this, valueArray);
}
// 将一些字段的特殊值过滤掉的方法
function FilterValue(value, defaultStr) {
    if ([null, Infinity, undefined, 'null', 'undefined', ' '].includes(value) || isNaN(value)) {
        return defaultStr
    } else {
        return value
    }
}



// 表格获取数据缓存的方法缓存
let EventCache = () => { };

const totalNumber = ref(0);
const PageParmas = ref({ pageSize: 10, pageNum: 1 })

// 获取表格数据
const GetData = function () {
    if (props.desableLoading !== '' || props.desableLoading === true) {
        loading.value = true;
    }
    EventCache(PageParmas.value).then(res => {
        const { list, total } = res;
        data.value = list || [];
        totalNumber.value = total
    }).finally(() => {
        loading.value = false;
    })
};

// 当分页参数变化时，加载表格数据
watch(PageParmas, () => GetData(), { deep: true })

defineExpose({
    // 给表格组件添加默认事件,并载入表格数据
    // 接收一个 Promise  需要 返回  { list :[] , total : 100 } 结构的对象
    SetAjax(Event) {
        EventCache = Event;
        PageParmas.value.pageNum = 1;
        PageParmas.value.pageSize = 10;
        GetData();
    },
    // 直接发送数据，不进行参数改变。
    Send() {
        GetData();
    },
    // 从第一页获取数据 (查询方法时，重置表格)
    ReSet() {
        PageParmas.value.pageNum = 10;
        PageParmas.value.pageSize = 1;
        GetData();
    }
})
</script>
<style lang="less" scoped>
.Layout {
    display: flex;
    flex-direction: column;
}

.TableContent {
    flex: auto;
}

.PageContent {
    text-align: center;
    padding-top: 8px;
    height: 50px;
    flex: none;
}
</style>